<template>
  <div>
    欢迎光临水果店
    <table>
      <th>
        <td>水果10元每斤，折扣8折</td>
      </th>
      <tr>
        <td>输入你要购买的斤数<input type="number" v-model.number="num"></td>
      </tr>
      <tr>
        <td><button @click="Pay">结账买单</button></td>
      </tr>
      <tr>
        <td>结账单：总价：{{zj}}￥元 折后价：{{zh}}￥元 省了：{{sl}}￥元</td>
      </tr>
      <tr>
        <td></td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data(){
    return {
      num:'',
      zj:'',
      zh:'',
      sl:''
    }
  },
  methods: {
    Pay() {
      this.zj = this.num*10,
      this.zh =this.zj*0.8
      this.sl = this.zj-this.zh
    }
  }
}
</script>

<style>

</style>